<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue选项卡</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				font-family: "微软雅黑";
			}
			
			a {
				text-decoration: none;
				color: #000;
				padding: 8px 16px;
				display: block;
				float: left;
			}
			
			.clearfix:after {
				/*伪元素是行内元素 正常浏览器清除浮动方法*/
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			.clearfix {
				zoom: 1;
				/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
			}
			.tabs-caption{
				background: #ccc;
				width: 100%;
			}
			#app{
				width: 300px;
				margin: 200px auto;
			}
			.tabs-aside-list{
				min-height: 200px;
				background: #eee;
			}
			.active{
				background: brown;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="tabs-caption clearfix">
				<a href="javascript:void(0);" @click="cur=0" :class="{'active':cur==0}">html</a>
				<a href="javascript:void(0);" @click="cur=1" :class="{'active':cur==1}">css</a>
				<a href="javascript:void(0);" @click="cur=2" :class="{'active':cur==2}">javascript</a>
				<a href="javascript:void(0);" @click="cur=3" :class="{'active':cur==3}">vue</a>
			</div>
			<div class="tabs-aside">
				<div class="tabs-aside-list" v-show="cur==0">html</div>
				<div class="tabs-aside-list" v-show="cur==1">css</div>
				<div class="tabs-aside-list" v-show="cur==2">javascript</div>
				<div class="tabs-aside-list" v-show="cur==3">vue</div>
			</div>
		</div>
		<script src="js/vue2.5.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					cur : 0
				}
			})
		</script>
	</body>

</html>